<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义vue项目</title>
    <!-- 使用这个是不可以的因为index.js中有import等关键字是无法识别的需要使用webpack打包的js文件 -->
<!--    <script type="text/javascript" src="index.js"></script>-->
    <!-- bundle.js 就是使用webpack进行打包的文件 -->
<!--    <script type="text/javascript" src="../dist/bundle.js"></script>-->
    <!-- 自动打包的路径则是指定的 -->
    <script type="javascript" src="/bundle.js"></script>
</head>
<body>
    <!--
        webpack 的基本使用
            1. 新建项目空白目录, 并运行 npm init -y 命令, 初始化包管理配置文件 package.json
            2. 新建 src 源代码目录
            3. 新建 src -> index.html 首页
            4. 运行 npm install jquery -S, 安装 jquery -S 为 开发也就是打包会打入此依赖, -D则是编译打包不会打入

        在项目中安装和配置webpack
            import $ from 'jquery' 在 js文件中是无法识别的所以需要使用webpack进行打包为新的js文件
            1. 运行 npm install webpack webpack-cli -D 命令, 安装 webpack 相关的包
            2. 在项目根目录中, 创建名为 webpack.config.js 的webpack配置文件
            3. 在 webpack 的配置文件中, 初始化如下配置:
                module.exports = {
                    mode: 'development', // mode 用来指定构建模式 production
                }

        webpack 的 4.x 版本中默认约定:
            打包的入口 src -> index.js
            打包的输出文件为 dist -> main.js
            * 如果需要修改打包的入口和出口, 可以在 webpack.config.js 中新增如下配置信息
            const path = require('path') // 导入node.js 中专门操作路径的模块
            module.exports = {
                mode: 'development', // mode 用来指定构建模式 production
                entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
                output: {
                    path: path.join(__dirname, './dist'), // 输出文件的存放路径
                    filename: 'bundle.js' // 输出文件的名称
                }
            }

        配置 webpack 的自动打包功能
            1. 运行 npm install webpack-dev-server -D 命令, 安装支持项目自动打包的工具
            2. package.json -> scripts 中的 dev 命令如下:
                "scripts": {
                    "dev": "webpack-dev-server" // script 节点下的脚本, 可以通过 npm run 执行
                }
            3. 将 src -> index.html 中, script 脚本的引用路径, 修改为 "/bundle.js"

        配置 html-webpack-plugin 生成首页预览页面
            1. 运行 npm install html-webpack-plugin -D 命令, 安装生成预览页面的插件
            2. 修改 webpack.config.js 文件头区域, 添加如下配置
                // 导入生成预览页面的插件, 得到一个构造函数
                const HtmlWebpackPlugin = require('html-webpack-plugin')
                const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
                    template: './src/index.html', // 指定要用到的模板文件
                    filename: 'index.html' // 指定生成的文件的名称, 该文件存在于内存中, 在目录中不显示
                })

            3. 修改 webpack.config.js 文件中向外暴露的配置对象, 新增如下配置节点:
                module.exports = {
                    plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
                }

         package.json scripts 启动自动打包的一些配置参数
             --open 打包完成之后自动打开浏览器页面
             --host 配置 IP 地址
             --port 配置端口


         webpack中的加载器
            通过 loader 打包非 js 模块
            * style-loader 打包样式
            * less-loader 可以打包处理 .less 相关的文件
            * sass-loader 可以打包处理 .scss 相关的文件
            * url-loader 可以打包处理 css 中与 url 路径相关的文件
            * file-loader 可以打包文件图片
                在 webpack.config.js 中添加过滤规则
                module: {
                    rules: [
                        { test: /\.css$/, use: ['style-loader', 'css-loader'] }
                    ]
                }

         配置 postCSS 自动添加 CSS 的兼容前缀
            1. 运行 npm install postcss-loader autoprefixer -D 命令
            2. 在项目根目录中创建 postcss 的配置文件 postcss.config.js, 并初始化如下配置:
                const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
                module.exports = {
                    plugins: [ autoprefixer ] // 挂载插件
                }
            3. 在 webpack.config.js 中的 module -> rules 中修改其规则
            module: {
                rules: [
                    { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } // 顺序不能颠倒 必须先导入 style-loader
                ]
            }

         打包处理 js 文件中的高级语法
            1. 安装 babel 转换器相关的包: npm i babel-loader @babel/core @babel/runtime -D
            2. 安装 babel 语法插件相关的包: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
            3. 在项目根目录中, 创建 babel 配置文件 babel.config.js 并初始化基本配置文件
                module.exports = {
                    presets: [ '@babel/preset-env' ],
                    plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
                }
            4. 在 webpack.config.js 的 module -> rules 数组中, 添加 loader 规则
                // exclude 为排除项, 表示 babel-loader 不需要处理 node_modules 中的文件
                { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

          webpack 中配置 vue 组件的加载器
            1. 运行 npm i vue-loader vue-template-compiler -D 命令
            2. 在 webpack.config.js 配置文件中, 添加 vue-loader 的配置如下

          打包命令
            在 package.json 中的 scripts 添加 "build": "webpack -p"
    -->

    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
        <li>第6个li</li>
        <li>第7个li</li>
        <li>第8个li</li>
    </ul>

    <div id="app"></div>
</body>
</html>